<html>
<head>
<title>{{ titulo }}</title>
<link type="text/css" rel="stylesheet" href="/static/css/main.css"></link>
<style>
div.graf {
	width: 600px;
	height: 400px;
	position: absolute;
	display: block;
	right: 0;
	bottom: 0;
	background-color: #FFFFFF;
	text-align: center;
}

select,input {
	margin-left: 15px;
}
</style>
<link rel="stylesheet" href="{{ config.theme }}" type="text/css" />
<script type="text/javascript"
	src="https://www.google.com/jsapi?key=ABQIAAAAHgOg6huaKJAv9G24UHf1KBT-_2ssS9ZvfOvr1Ca1c9UJDHLkmhQMLz6VvDl-zLZ9USIlHGHxy3IcGg"></script>
<script type="text/javascript">
	google.load("jquery", "1.6.4");
	google.load("jqueryui", "1.8.16");
</script>
<script type="text/javascript" src="/static/js/funciones.js"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	// Load the Visualization API and the piechart package.
	google.load('visualization', '1.0', {
		'packages' : [ 'corechart' ]
	});

	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(drawChart);

	// Callback that creates and populates a data table, 
	// instantiates the pie chart, passes in the data and
	// draws it.
	function drawChart() {

		var bip = 11289335 + 10278010 + 779425 + 306128;
		var minor = 25900439 - bip;
		var abs = 9172740;
		var nulo = 165576;
		var blanco = 286182;
		var w = 600;
		var h = 400;

		// Create the data table.
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Tipo');
		data.addColumn('number', 'Votos');
		data.addRows([ [ 'Blancos', blanco ], [ 'Nulos', nulo ],
				[ 'Bipartidismo', bip ], [ 'Partidos minoritarios', minor ],
				[ 'Abstensiones', abs ] ]);

		var nobip = minor + abs + blanco + nulo;

		// Create the data table.
		var data2 = new google.visualization.DataTable();
		data2.addColumn('string', 'Tipo');
		data2.addColumn('number', 'Votos');
		data2.addRows([ [ 'Bipartidismo', bip ],
				[ 'Contra Bipartidismo', nobip ] ]);

		// Set chart options
		var options = {
			'title' : 'Elecciones generales',
			'width' : w,
			'height' : h
		};

		// Set chart options
		var options2 = {
			'title' : 'Elecciones 15M',
			'width' : w,
			'height' : h
		};

		// Instantiate and draw our chart, passing in some options.
		var chart = new google.visualization.PieChart(document
				.getElementById('chart_div'));
		chart.draw(data, options);

		// Instantiate and draw our chart, passing in some options.
		var chart2 = new google.visualization.PieChart(document
				.getElementById('chart_div2'));
		chart2.draw(data2, options2);
	}
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".boton").button();
		$(window).resize(function() {

			// aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
			$('#chart_div').css({
				position : 'absolute',
				left : ($(window).width() - 1100),
				top : ($(window).height() - 650)
			});

			// aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
			$('#chart_div2').css({
				position : 'absolute',
				left : ($(window).width() - 750),
				top : ($(window).height() - 450)
			});

		});

		// Ejecutamos la función
		$(window).resize();
	});
</script>
</head>

<body>
	<table align="center" class="tablaMsj" cellpadding="0" cellspacing="0"
		width="100%">
		<tr id="inicio">
			<td align="right"><a id="volver" class="volver"
				href="{{ volver.url }}">{{ volver.nombre }}</a>&nbsp;<a id="alogin"
				class="logout" href="{{ url }}">{{ url_linktext }}</a></td>
		</tr>
	</table>
	<!--Div that will hold the pie chart-->
	<div id="chart_div" class="graf"></div>
	<div id="chart_div2" class="graf"></div>
</body>
</html>